<template>
  <div>
    <el-dialog
      width="600px"
      :title="$t('实时音频分析')"
      :visible.sync="analysisDialog"
      @close="analysisClose"
    >
      <div class="y-maxValue">24khz</div>
      <div class="videoOuterWrapper">
        <span class="yLabel" id="analys_samp_rate" style="left: -3px"></span>
        <div class="videoInnerWrapper">
          <i id="triUp" class="el-icon-arrow-up"></i>
          <i id="triRight" class="el-icon-arrow-right"></i>
          <!-- src="http://192.168.61.43/stft_stream" -->
          <iframe
            src="/lfxs/stft_stream"
            width="100%"
            height="198px"
            frameborder="0"
            id="systemVideo"
          ></iframe>
        </div>
        <div class="xLabelWrapper">
          <span>0s</span>
          <span>0.1s</span>
          <span>0.2s</span>
          <span>0.3s</span>
          <span>0.4s</span>
          <span>0.5s</span>
          <span>0.6s</span>
          <span>0.7s</span>
          <span>0.8s</span>
          <span>0.9s</span>
          <span>1s</span>
        </div>
      </div>
      <div class="voiceController">
        <div class="audio">
          <span>{{ $t("音频播放") }}</span>
          <el-switch v-model="switch1" @change="changeStatus"> </el-switch>
        </div>
        <div class="voice">
          <span>{{ $t("音量调整") }}</span>
          <el-slider
            v-model="value1"
            @change="InputVolume(this.value1)"
            style="width: 150px"
          ></el-slider>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { createPCMPlayer } from "../js/pcmPlayer";
import { playAudio } from "../js/voice";
import { stopAudio } from "../js/voice";
import { inputVolume } from "../js/voice";
var player = new createPCMPlayer({
  // inputCodec: 'Int16',
  inputCodec: "Float32",
  channels: 1,
  // sampleRate: samp_rate,
  sampleRate: 48000,
  flushTime: 500,
});
export default {
  props: {
    analysisDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      value1: 25,
      switch1: false,
    };
  },
  created() {},
  methods: {
    analysisClose() {
      this.$emit("input");
    },
    changeStatus() {
      // let objSocket = new WebSocket("ws://192.168.61.43/audio_stream");
      let objSocket = new WebSocket(
        `ws://${window.location.host}/lfxs/audio_stream`
      );
      let timeoutObj;
      if (this.switch1 === true) {
        playAudio(objSocket, player, timeoutObj);
      } else {
        if (objSocket.readyState === WebSocket.OPEN) {
          stopAudio(objSocket);
        } else {
          console.log("意外事件！");
        }
      }
    },
    InputVolume(voice) {
      inputVolume(player, voice);
    },
  },
};
</script>
<style lang="scss" scoped>
.clearfix {
  margin-top: 60px;
}
.y-maxValue {
  position: relative;
  left: -10px;
  top: 20px;
}
.videoOuterWrapper {
  width: 96%;
  // height: 240px;
  margin-left: 18px;
}

.videoInnerWrapper {
  position: relative;
  width: 97%;
  height: 108px !important;
  margin-left: 3%;
  padding-bottom: 5px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
#systemVideo {
  width: 99%;
  height: 100%;
  margin-left: 1%;
  margin-bottom: 5px;
}

#triUp,
#triRight {
  position: absolute;
  width: 15px;
}

#triUp {
  top: -13px;
  left: -8px;
}

#triRight {
  bottom: -8px;
  right: -13px;
}

.yLabel {
  position: absolute;
}

.xLabelWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 3.97%;
}

.xLabelWrapper span {
  width: 6%;
  text-align: center;
}

.voiceController {
  display: flex;
  align-items: center;
  font-size: 16px;
}
.voice,
.audio {
  flex: 1;
}
.voice {
  display: flex;
}
.voice span {
  display: inline-block;
  width: 85px;
  line-height: 36px;
}
::v-deep {
  .el-dialog:not(.is-fullscreen) {
    margin-top: 30vh !important;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .self {
    .el-table__body-wrapper {
      width: 100%;
      max-height: 260px;
      overflow: auto;
    }
  }
}
</style>
